<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI聊天机器人</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Bootstrap 图标 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css">
    <!-- Highlight.js 代码高亮 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github.min.css">
    <!-- 自定义样式 -->
    <link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>
<body class="bg-light">
    <div class="container py-4 px-3 max-width-mobile">
        <header class="d-flex justify-content-between align-items-center mb-4">
            <h1 class="text-center flex-grow-1">AI聊天助手</h1>
            <button class="btn btn-outline-secondary btn-sm" id="clearHistoryBtn" title="清除对话历史">
                <i class="bi bi-trash"></i>
            </button>
        </header>
        <p class="text-center text-muted small">基于GPT-4o模型 · 支持流式传输 · Markdown · 图片上传</p>
        
        <!-- 聊天记录区域 -->
        <div class="chat-container mb-3 bg-white rounded shadow-sm" id="chatContainer">
            <!-- 聊天记录将在这里动态添加 -->
        </div>
        
        <!-- 图片预览区域 -->
        <div id="imagePreviewContainer" class="mb-3 d-none">
            <div class="position-relative image-preview-wrapper">
                <img id="imagePreview" class="img-fluid rounded">
                <button type="button" class="btn-close btn-close-white position-absolute top-0 end-0 m-2" id="removeImageBtn" aria-label="关闭"></button>
            </div>
        </div>
        
        <!-- 输入区域 -->
        <div class="input-area">
            <div class="input-group">
                <textarea class="form-control auto-resize" id="userInput" placeholder="请输入消息..." rows="1"></textarea>
                <button class="btn btn-outline-secondary" type="button" id="uploadButton" title="上传图片">
                    <i class="bi bi-image"></i>
                </button>
                <button class="btn btn-primary" type="button" id="sendButton">
                    <i class="bi bi-send-fill"></i> 发送
                </button>
            </div>
            <input type="file" id="fileInput" class="d-none" accept="image/*">
        </div>
        
        <!-- 使用提示 -->
        <div class="mt-3 text-center">
            <small class="text-muted">
                提示: 使用回车键可以换行, 点击发送按钮提交消息
                <br>
                <a href="#" data-bs-toggle="modal" data-bs-target="#helpModal">查看更多使用说明</a>
            </small>
        </div>
    </div>
    
    <!-- 帮助模态框 -->
    <div class="modal fade" id="helpModal" tabindex="-1" aria-labelledby="helpModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="helpModalLabel">使用说明</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <h6>基本操作:</h6>
                    <ul>
                        <li>在输入框中输入您的问题或指令</li>
                        <li>使用回车键进行换行（不会直接发送消息）</li>
                        <li>点击"发送"按钮提交消息</li>
                        <li>AI将逐字回复您的问题（流式传输）</li>
                    </ul>
                    
                    <h6>特色功能:</h6>
                    <ul>
                        <li>支持多行文本输入</li>
                        <li>输入框会根据内容自动调整高度</li>
                        <li>聊天记录自动显示在左右两侧（用户在右，AI在左）</li>
                        <li>支持上传图片，与AI进行多模态交互</li>
                        <li>支持Markdown格式渲染，包括代码高亮</li>
                        <li>点击垃圾桶图标可以清除对话历史</li>
                    </ul>
                    
                    <h6>支持的Markdown格式:</h6>
                    <ul>
                        <li>标题: # 一级标题, ## 二级标题, ...</li>
                        <li>文本样式: **粗体**, *斜体*, ~~删除线~~</li>
                        <li>列表: - 项目, 1. 有序列表</li>
                        <li>代码: `行内代码`, ```python 代码块 ```</li>
                        <li>链接: [链接文本](URL)</li>
                        <li>表格: | 表头 | 表头 | 与 |----|----| 分隔线</li>
                    </ul>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap 5 JS Bundle -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Marked.js Markdown解析 -->
    <script src="https://cdn.jsdelivr.net/npm/marked@4.3.0/marked.min.js"></script>
    <!-- DOMPurify 防止XSS攻击 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.0.5/purify.min.js"></script>
    <!-- Highlight.js 代码高亮 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
    <!-- 自定义脚本 -->
    <script src="{{ url_for('static', filename='js/script.js') }}"></script>
</body>
</html> 